<template>
  <div class="div">
    <a-row class="top_font">
      <a-col span="7">
        <a-input addon-before="社团：" v-model="search.club"/>
      </a-col>
      <a-col span="3">
        <a-button
          style="margin-left: 48px"
          icon="search"
          type="primary"
          htmlType="submit"
          @click="searchList()"
        >查询</a-button>
      </a-col>
    </a-row>
    <a-row class="center_margin">
      <a-col span="7" class="">
        <a-input addon-before="用户账号：" v-model="search.username"/>
      </a-col>
      <a-col span="3">
        <a-button
          icon="sync"
          style="margin-left: 48px"
          @click="reset()"
        >重置</a-button>
      </a-col>
    </a-row>
    <a-row class="bottom_font">
      <a-col class="title" span="4">
        用户账号
      </a-col>
      <a-col class="title" span="4">
        用户昵称
      </a-col>
      <a-col class="title" span="4">
        提交时间
      </a-col>
      <a-col class="title" span="4">
        社团
      </a-col>
      <a-col class="title" span="4">
        状态
      </a-col>
      <a-col class="title" span="4">
        操作
      </a-col>
    </a-row>
    <a-list :data-source="data" :pagination="{onChange: (current, size) => {this.num = current,this.searchViews?this.searchInfo():this.getAll()}, showQuickJumper: true, pageSize: 15, total: totalList}">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <a-col class="numb" span="4">
          {{ item.username }}
        </a-col>
        <a-col class="numb" span="4">
          {{ item.name }}
        </a-col>
        <a-col class="numb" span="4">
          {{ item.createTime }}
        </a-col>
        <a-col class="numb" span="4">
          {{ item.club }}
        </a-col>
        <a-col class="numb" span="4">
          {{ item.state }}
        </a-col>
        <a-col class="numb" span="4">
          <a-button @click="pass(index,1)" type="link" size="small" class="operate_change">通过</a-button>
          <a-button @click="pass(index,0)" type="link" size="small" class="operate_change">不通过</a-button>
        </a-col>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { searchAuthentication, updateAuthentication, getAllAuthentication } from '@/api/manage'

export default {
  data () {
    return {
      data: [],
      num: 1,
      searchViews: false,
      totalList: 0,
      passCheck: 0,
      search: { pageSize: 15, pageNum: 1, username: '', club: '' }
    }
  },
  methods: {
    reset () {
      this.$set(this.search, 'username', '')
      this.$set(this.search, 'club', '')
      this.num = 1
      if (this.searchViews) {
        this.getAll()
      }
      this.searchViews = false
    },
    getAll () {
      const page = { pageSize: 15, pageNum: this.num }
      getAllAuthentication(page).then((res) => {
        // console.log(res)
        this.data = res.datalist
        this.totalList = Number(res.total)
      })
    },
    pass (index, state) {
      // 通过
      if (state === 0) {
        this.passCheck = 1
      } else {
        this.passCheck = 0
      }
      const passId = { id: this.data[index].id, userId: this.data[index].userId, club: this.data[index].club, state: this.passCheck }
      updateAuthentication(passId).then((res) => {
        // console.log('success')
      })
    },
    searchList () {
      this.num = 1
      if (this.searchViews) {
        this.getAll()
      }
      this.searchViews = false
    },
    searchInfo () {
      this.$set(this.search, 'pageNum', this.num)
      searchAuthentication(this.search).then((res) => {
        this.data = res.datalist
        this.totalList = Number(res.total)
        // console.log(res)
      })
    }
  },
  created () {
    this.getAll()
  }
}
</script>

<style scoped>
.div{
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 40px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
}
.top_font{
    text-align: right;
    font-size: medium;
}
.center_margin{
    text-align: right;
    margin-top: 10px;
    font-size: medium;
}
.img{
    height: 20px;
    width: 20px;
    border-radius: 100%;
    margin-left: 48px
}
.bottom_font{
    text-align: center;
    font-size: medium;
    margin-top: 10px;
    background-color: rgba(241, 247, 247, 0.979);

}
.numb{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    word-break: break-all;
    font-size: medium;
    text-align: center;
    word-wrap: break-word;
}
</style>
